<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="navtop">
		    <u-navbar title="订单详情" back-icon-color="#fff"  :background="{
                background:'#0093dd'
            }" :border-bottom="false" title-color="#fff"  ></u-navbar>
		</view>
		
		<template v-if="info">
			
			<view class="order-warp">
				
				
				<view class="state">
					<image src="/static/icon_state2.png" mode="widthFix" class="icon"></image>
					<text>{{order_status[info.orderMsg.order_status]}}</text>
				</view>
				
				
				<view class="addres-wrap">
					
					<image src="/static/icon_add.png" mode="widthFix" class="icon-add"></image>
					<view class="info">
						<view class="addhead">
							<text class="name">{{info.address.name}}</text>
							<text class="mobile">{{info.address.mobile}}</text>
						</view>
						<view class="text">{{info.address.address}}</view>
					</view>
					
				</view>
			</view>
			
			<!-- <view class="ibox" v-if="info.order.shipType == 2 && info.order.shipName && info.order.shipName">
				<view class="titlebox">
					<image src="/static/icon_state3.png" mode="widthFix" class="icon"></image>
					<text>发货信息</text>
				</view>
				<view class="log-item">
					物流公司：{{info.order.shipName}}
				</view>
				<view class="log-item">
					<text>物流单号：{{info.order.shipSn}}</text>
					<image  @click="$common.copy(info.order.shipSn)" src="/static/icon_copy.png" class="icon-copy" mode="widthFix"></image>
				</view>
				<u-gap height="20"></u-gap>
			</view> -->
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_box.png" mode="widthFix" class="icon"></image>
					<text>商品信息</text>
				</view>
				
				<view class="goods-list">
					<view class="goods-item" v-for="(item, index) in info.goods">
						<u-image :src="item.image" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="goods-name txt-hide">{{item.goods_name}}</view>
							<view class="attrbox">
								{{item.description}}
							</view>
							<view class="desc" style="margin-top: 20rpx;">
								<view class="price">¥ <text style="padding-left: 4px;">{{item.goods_price}}</text></view>
								<text class="num">x{{item.goods_num}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_invoice.png" mode="widthFix" class="icon"></image>
					<text>站点信息</text>
				</view>
				<view class="desc-text">
					<view class="label">供应站名称</view>
					<view class="value">{{info.siteMsg.name}}</view>
				</view>
				<view class="desc-text"  @click="makePhoneCall(info.siteMsg.head_mobile)">
					<view class="label">供应站联系方式</view>
					<view class="value"><u-icon name="phone"></u-icon>{{info.siteMsg.head_mobile}}</view>
				</view>
				<view class="desc-text"  @click="navigation(info.siteMsg.latitude, info.siteMsg.name)">
					<view class="label">供应站地址</view>
					<view class="value">
						<u-icon name="map" color="#0093dd"></u-icon>
						<text style="color:#0093dd">{{info.siteMsg.address}}</text>
					</view>
				</view>
				<!-- <view class="site">
					<view class="site-item" >
						<u-image src="/static/icon_site.png" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="name">
								<text class="na">{{info.siteMsg.name}}</text>
							</view>
							<view class="tel" @click="makePhoneCall(info.siteMsg.head_mobile)">
								<u-icon name="phone" color="#0093dd"></u-icon>
								<text>{{info.siteMsg.head_mobile}}</text>
							</view>
							<view >
								<u-button size="mini" type="success" @click="navigation(info.siteMsg.latitude, info.siteMsg.name)">
									<u-icon name="map" size="26"></u-icon>
									导航
								</u-button>
							</view>
						</view>
					</view>
				</view> -->
				
				
				<u-gap height="20"></u-gap>
			</view>
			
			
			
			<view class="ibox">
				
				<view class="titlebox">
					<image src="/static/icon_wallet.png" mode="widthFix" class="icon"></image>
					<text>付款信息</text>
				</view>
				
				<view class="desc-text">
					<view class="label">订单类型</view>
					<view class="value">
						<!-- displace_or_add 1共享瓶订气2新增共享瓶-->
						<!-- 共享瓶订气 -->
						{{info.orderMsg.displace_or_add == 1 ? '共享瓶订气' : '新增共享瓶'}}
					</view>
				</view>
				<view class="desc-text">
					<view class="label">共享瓶押金</view>
					<view class="value">¥{{info.orderMsg.bottle_deposit}}</view>
				</view>
				<view class="desc-text" @click="showRent=true">
					<view class="label">
						共享瓶租金
						<u-icon size="28" name="info-circle"></u-icon>
					</view>
					<!-- <view class="value">¥<text>{{bottle_rent}}</text></view> -->
					<view class="value">¥<text>{{info.orderMsg.rent}}</text></view>
					
				</view>
				<!-- <view class="desc-text">
					<view class="label">共享瓶租金</view>
					<view >
						<view class="value"><u-icon size="28" name="info-circle"></u-icon> ¥<text>{{bottle_rent}}</text>一个月，半年结算一次</view>
					</view>
				</view> -->
				
				<!-- <view class="desc-text">
					<view class="label">待缴共享瓶租金</view>
					<view @click="link('/pages/user/bottle?current=1')" style="text-align: right; font-size: 24rpx; color: #999;">
						<view class="value"><u-icon size="28" name="info-circle"></u-icon> ¥<text>{{bottle_rent}}</text>一个月，半年结算一次</view>
					</view>
				</view> -->
				
				
				<view class="desc-text">
						<view class="label">楼层费</view>
						<view class="value">¥{{info.orderMsg.floor_amount}}</view>
					</view>
			<!-- 	<view class="desc-text">
					<view class="label">钢瓶使用费(年)</view>
					<view class="value">¥{{info.orderMsg.rent}}</view>
				</view> -->
				<view class="desc-text">
					<view class="label">气价</view>
					<view class="value">¥{{info.orderMsg.bottle_amount}}</view>
				</view>
				<view class="desc-text">
					<view class="label">商品增购</view>
					<view class="value">¥{{info.orderMsg.additionalPrice}}</view>
				</view>
				<view class="desc-text">
					<view class="label">实际付款金额</view>
					<view class="value">¥{{info.orderMsg.order_amount}}</view>
				</view>
				
				<view class="desc-text">
					<view class="label">订单备注</view>
					<view class="value">{{info.orderMsg.user_remark}}</view>
				</view>
				<u-gap height="20"></u-gap>
			</view>
			
			
			
			<view class="ibox">
				<view class="titlebox">
					<image src="/static/icon_invoice.png" mode="widthFix" class="icon"></image>
					<text>订单信息</text>
				</view>
				
				<view class="desc-text">
					<view class="label">订单编号</view>
					<view class="value">{{info.orderMsg.order_sn}}</view>
				</view>
				<view class="desc-text">
					<view class="label">是否需要旧瓶回收服务</view>
					<view class="value">{{info.orderMsg.is_recovery ? '是' : '否'}}</view>
					
				</view>
				
				<view class="desc-text">
					<view class="label">下单时间</view>
					<view class="value">{{info.orderMsg.create_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.pay_time">
					<view class="label">付款时间</view>
					<view class="value">{{info.orderMsg.pay_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.shippine_time">
					<view class="label">送达时间</view>
					<view class="value">{{info.orderMsg.shippine_time}}</view>
				</view>
				
				<view class="desc-text" v-if="info.orderMsg.confirm_take_time">
					<view class="label">成交时间</view>
					<view class="value">{{info.orderMsg.confirm_take_time}}</view>
				</view>
				<!-- deliveryTime-配送时间、serveTime-送达时间 -->
				<u-gap height="20"></u-gap>
			</view>
			<!-- 
			<view class="ibox" v-if="info.order.orderRemark && info.order.orderRemark.length">
				<view class="titlebox">
					<image src="/static/icon_description.png" mode="widthFix" class="icon"></image>
					<text>订单备注</text>
				</view>
				<view class="text" style="color: #666;">
					{{info.order.orderRemark}}
				</view>		
				<u-gap height="20"></u-gap>
			</view> -->
			
			
			<view style="height: 120rpx;"></view>
			<view class="order-foot">
				<!-- 	<u-button class="btn" type="primary" v-if="info.order.orderStatus == 2" @click="showDelivery=true" :custom-style="btnStyle" size="medium">去支付</u-button>
					<u-button class="btn" type="primary" v-if="info.order.orderStatus == 3" @click="showSended=true" :custom-style="btnStyle" size="medium">确认送达</u-button>
					 -->
				
				 
				<!-- <u-button class="btn" type="primary" v-if="info.order.orderStatus == 7 && info.order.isInvoice == 0" @click="link(`./open_bill?id=${id}`)" :custom-style="btnStyle" size="medium">申请开票</u-button>
				 
				<u-button class="btn" v-if="info.order.isInvoice == 1" type="primary" @click="link(`/pages/user/invoice_info?id=${info.order.invoiceId}`)" :custom-style="btnStyle" size="medium">查看开票</u-button> -->
			</view>
			
		<!-- 	<u-modal v-model="showSended" :show-confirm-button="true" :show-cancel-button="true" confirm-text="确认" @confirm="confirmSended()" content="是否确定送达？"></u-modal>
			 -->
			
		</template>
		
		
		<u-modal v-model="showRule" @confirm="showRule=false" :show-cancel-button="false" :content="content"></u-modal>
		
		
		<u-popup v-model="showRent" :closeable="true" mode="bottom" height="400">
			<view class="content-desc">
				<view class="title">共享瓶租金说明</view>
				<view class="text">
					押瓶租金 {{bottle_rent}}元/天
				</view>
				<view class="text">
					钢瓶租金按天计费
				</view>
			</view>
		</u-popup>
	
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            ready: false,
			showSended:false,
			showDelivery:false,
			showSend: false,
			current: 0,
			tab:0,
			btnStyle:{
				background: '#0093dd',
				borderRadius: '16px',
				padding:'0 15px',
				marginLeft: '5px'
			},
			logistics:[],
			id:null,
			info:null,
			showRemark:false,
			logForm:{
				shipId:'',
				shipSn:'',
			},
			orderRemark:'',
			showShip:false,
			order_status:{
				0:'待支付',
				1:'待配送',
				2:'已完成',
				3:'已退款',
			},
			bottle_rent:0,
			content:'',
			showRule:false,
			showRent:false,
        };
    },
   onLoad(o) {
       that = this;
		if(o.id){
			this.id = o.id
		}
		// this.getShowMsg();
   },
    onReady() {
    },
    onShow() {
       this.getInit();
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		navigation(latitude, name=""){
			let lat = latitude.split(',')
			console.log(lat);
			console.log(lat)
		    this.$common.navigation({
				name,
				lat: lat[0],
				lng:  lat[1],
			})
		},
		makePhoneCall(num){
			this.$common.makePhoneCall(num)
		},
		async getShowMsg() {
		    let res = {};
			// "description": "type 1（当前所押瓶） 2（缴租记录）"
		    try {
		        res = await this.$api.showMsg();
		    } catch (e) {
		        uni.hideLoading();
		        console.log('err', e);
		    }
		    if (res.data.code == this.$config.RESOK) {
				this.content = res.data.data.rent;
				// this.returnText = res.data.data.return
		    } 
		},
		handlePrint(){
			this.$common.showTip('功能开发中')
		},
		logSelect(e){
			this.$set(this.logForm, 'ship', e[0].label)
			this.$set(this.logForm, 'shipId', e[0].value)
		},
		//确定发货
		async submitSend(){
			if(!this.logForm.shipId.length){
				this.$common.showTip('请选择快递信息')
				return
			}
			if(!this.logForm.shipSn.length){
				this.$common.showTip('请填写单号')
				return
			}
			uni.showLoading();
			let res = await this.$api.confirmShip({
				orderId:this.id,
				...this.logForm,
			});
			uni.hideLoading();
			if (res.data.code == this.$config.RESOK) {
				this.showSend = false;
				// this.$common.showTip(res.data.msg);
				this.$common.showTip('发货成功');
				this.getInit()
			} else {
				this.$message.error(res.data.msg);
			}
		},
		//确认送达
		async confirmSended(){
			uni.showLoading();
			let res = await this.$api.confirmServe({
				orderId:this.id
			});
			uni.hideLoading();
			if (res.data.code == this.$config.RESOK) {
				// this.$common.showTip(res.data.msg);
				this.$common.showTip('配送成功');
				this.getInit()
			} else {
				this.$message.error(res.data.msg);
			}
		},
		//确认开始配送
		async confirmSend(){
			uni.showLoading();
			let res = await this.$api.confirmDelivery({
				orderId:this.id
			});
			uni.hideLoading();
			if (res.data.code == this.$config.RESOK) {
				// this.$common.showTip(res.data.msg);
				this.$common.showTip('配送成功');
				this.getInit()
			} else {
				this.$message.error(res.data.msg);
			}
		},
		//订单备注
		async submitRemark(){
			if(!this.orderRemark.length){
				this.$common.showTip('请输入备注')
				return
			}
			uni.showLoading();
			let res = await this.$api.submitRemark({
				orderId:this.id,
				orderRemark: this.orderRemark,
			});
			uni.hideLoading();
			if (res.data.code == this.$config.RESOK) {
				// this.$common.showTip(res.data.msg);
				this.$common.showTip('保存成功');
				this.getInit()
				this.showRemark=false;
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async getLogCompany(){
			let res = await this.$api.logCompany();
			if (res.data.code == this.$config.RESOK) {
				this.logistics =  res.data.data.map(item=>{
					return {
						name: item.dictLabel,
						value: item.dictValue,
						label: item.dictLabel,
						id: item.dictValue,
					}
				})
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async getInit(){
			let res = await this.$api.orderDetail({
				order_id:this.id
			});
			let resRent = await	this.$api.showConfig({
					 type:'pay',
					 name:'bottle_rent'
				});
			if (res.data.code == this.$config.RESOK) {
				let info = res.data.data;
				// info.goods.forEach(item=>{
				// 	item.image = this.$config.httpImgs + item.image
				// })
				this.info = info;
				this.ready=true;
			} else {
				this.$message.error(res.data.msg);
			}
			if (resRent.data.code == this.$config.RESOK) {
				 this.bottle_rent = resRent.data.data
			} 
		},
		radioGroupChange(){
			
		},
		radioChange(){
			
		},
		handleTab(e){
			this.tab = e;
		},
		change(e){
			this.current = e;
		},
        submit() {
            console.log('submit')
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    console.log('验证通过');
                } else {
                    console.log('验证失败');
                }
            });
        },
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}

.order-warp{
	background: #0093dd;
	padding: 24rpx 32rpx;
	.state{
		display: flex;
		color: #fff;
		align-items: center;
		.icon{
			width: 28px;
			height: 28px;
		}
		text{
			margin-left: 6px;
			font-size: 20px;
		}
	}
	.addres-wrap{
		margin-top: 40rpx;
		background: #fff;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 32rpx;
		.icon-add{
			width: 18px;
			height: 18px;
		}
		.info{
			flex: 1;
			padding-left: 20rpx;
		}
		.name{
			margin-right: 12px;
		}
		.addhead{
			margin-bottom: 4px;
		}
		.text{
			font-size: 14px;
		}
	}

}
.ibox{
	background: #fff;
	margin: 16rpx 32rpx;
	border-radius: 12px;
	padding: 0 32rpx;
	
	.log-item{
		display: flex;
		align-items: center;
		padding: 4px 0;
		text{
			margin-right: 10px;
		}
		.icon-copy{
			width: 18px;
			height: 18px;
		}
	}
}

.titlebox{
	display: flex;
	padding: 28rpx 0;
	align-items: center;
	.icon{
		width: 18px;
		height: 18px;
	}
	text{
		margin-left: 5px;
		font-size: 16px;
	}
}
.goods-list{
	border: 0;
}
.desc-text{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #8E8E9A;
	padding: 4px 0;
}
.order-foot{
	text-align: right;
	padding: 10rpx 30rpx;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99;
	 background-color: #F8FAFD;
}

.send-popup{
	padding: 20rpx 30rpx;
	position: relative;
	.btn-close{
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
	.title{
		text-align: center;
		font-size: 16px;
		margin-bottom: 20rpx;
	}
	.item{
		margin-bottom: 20rpx;
	}
	.label{
		font-size: 14px;
		margin-bottom: 6px;
	}
	.btnbox{
		padding-top: 30rpx;
	}
}

.attrbox{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	padding: 2px 0;
	color: #666;
	.attr-name{
		width: 80%;
		font-size: 12px;
	}
	.num{
		
	}
}
.sell{
	padding: 10px 0;
	color: #666;
}

.goods-list{
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 10rpx 0;
	.goods-item{
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.info{
		flex: 1;
		width: 480rpx;
		padding-left: 20rpx;
	}
	.goods-name{
		line-height: 26px;
		font-size: 14px;
		font-weight: bold;
	}
	.attr{
		font-size: 12px;
		color: #979797;
		margin-bottom: 2px;
	}
	.price{
		font-size: 12px;
		color: $color-red;
		text{
			font-size: 15px;
		}
	}
	.desc{
		
		display: flex;
		justify-content: space-between;
	}
}


.content-desc{
		padding: 30rpx;
		.title{
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}
	
	
	.site{
		background: #fff;
		.site-item{
			border-bottom: 1px solid #ddd;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			&:nth-last-child(1){
				border: 0;
			}
		}
		.info{
			flex: 1;
			padding: 0 20rpx;
		}
		.tel{
			font-size: 13px;
			display: flex;
			align-items: center;
			margin-bottom: 2px;
			color: $color;
		}
		.name{
			font-size: 15px;
			margin-bottom: 4px;
			color: #333;
			font-weight: bold;
			display: flex;
			align-items: center;
		}
		.na{
			margin-right: 5px;
		}
		.text{
			font-size: 13px;
			color: #666;
		}
	}
</style>
